<template>
  <div class="theme-controls">
    <color-picker />
    <el-button
      ref="toggleRef"
      :icon="isDarkMode ? Sunny : Moon"
      circle
      class="theme-toggle"
      :title="isDarkMode ? '切换到亮色模式' : '切换到暗色模式'"
      @click="toggleTheme"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { Moon, Sunny } from '@element-plus/icons-vue';
import { useThemeStore } from '@/stores/theme';
import ColorPicker from './ColorPicker.vue';

const themeStore = useThemeStore();
const toggleRef = ref();

const isDarkMode = computed(() => themeStore.isDarkMode);

const toggleTheme = (event: MouseEvent) => {
  // 检查是否支持 View Transition API
  if (!(document as any).startViewTransition) {
    themeStore.toggleTheme();
    return;
  }

  const x = event.clientX;
  const y = event.clientY;
  const endRadius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));

  // 创建动画
  const transition = (document as any).startViewTransition(() => {
    themeStore.toggleTheme();
  });

  transition.ready.then(() => {
    const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`];

    document.documentElement.animate(
      {
        clipPath: isDarkMode.value ? clipPath.reverse() : clipPath,
      },
      {
        duration: 500,
        easing: 'ease-in-out',
        pseudoElement: isDarkMode.value ? '::view-transition-old(root)' : '::view-transition-new(root)',
      },
    );
  });
};
</script>

<style scoped>
.theme-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-toggle {
  transition: transform 0.2s ease;
}

.theme-toggle:hover {
  transform: scale(1.1);
}
</style>
